import React from 'react';
import { ConfigProvider, Empty, Spin } from 'antd';
import zhCN from 'antd/locale/zh_CN'; // 设置中文
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';
import NoDataImg from '../../assets/img/no-data.png';
import '../../assets/style/index.scss'; // 全局样式
import globalStore from '../../store/global';
import { observer } from 'mobx-react-lite';
import { Scrollbars } from 'react-custom-scrollbars';

dayjs.locale('zh-cn'); // 日期类组件设置中文

const theme = { // antd主题样式
    token: {
        colorPrimary: '#1890FF',
        borderRadius: 2,
    },
};

// 全局自定义无数据
const customizeRenderEmpty = () => (
    <Empty
        description={
            <div className="fz-24 m-b-50">
                <div className="fz-14 color-999">暂无数据</div>
            </div>
        }
        image={NoDataImg}
        imageStyle={{
            height: 120,
        }}
    />
);

const AntdConfig = ({ children }) => {
    return (
        <ConfigProvider
            locale={zhCN}
            renderEmpty={customizeRenderEmpty}
            space={{ size: 'middle' }}
            theme={theme}
        >
            <Scrollbars>
                {/* 全局loading*/}
                <Spin spinning={globalStore.loading}>
                    {children}
                </Spin>
            </Scrollbars>
        </ConfigProvider>
    );
};

export default observer(AntdConfig);
